<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试时钟效果</title>
</head>
<body>
<p>在页面显示一个时钟</p>
<p id="time"></p>
<button id="btn-stop" onclick="stop()">停止</button>
<button id="btn-start" onclick="start()">开始</button>

<script src="js/common.js"></script>
<script>
    let stopState = true; //表示停止按钮默认是可用的
    let startState = false; //表示开始按钮默认是可用的

    mytime();

    let timeInterval=setInterval(mytime, 1000);

    function stop() {
        clearInterval(timeInterval);
        stopState = false; // 设置停止按钮状态位不可用
        startState = true;// 设置开始按钮状态位不可用
        // 变更停止按钮的真实状态
        changeBtnState();
    }

    function start() {
        timeInterval = setInterval(mytime, 1000);
        startState = false;
        stopState = true;
        changeBtnState();
    }

    function changeBtnState() {
        $("btn-stop").disabled = !stopState;
        $("btn-start").disabled = !startState;
    }

    function mytime() {
        let date = new Date();
        let dateStr = date.toLocaleTimeString();
        $("time").innerText = dateStr;
    }


</script>
</body>
</html>